﻿@{
    ViewBag.Title = "BasicSelector";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    #divNames {
        border: 1px solid #e8e800;
        color: #1188ff;
        width: 50%;
    }
    
    .highlight {
        border: 1px solid #009b00;
        color: #009b00;
        font-family: Consolas;
        font-size: 12pt;
        font-weight: bold;
        width: 200px;
    }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        /*
            Div Names
         */

        var nodes = $('#divNames').children();
        ZEUS.DEBUG.log("Number of names div: " + nodes.length);

        var txt = "";
        $('#divNames').children().each(function () {
            txt += $(this).text() + " ";
        });
        ZEUS.DEBUG.log("List of names: " + txt);

        /*
            add para
         */

        $('#btnInsertBefore').click(function () {
            var txtAdd = $('#txtPara').val();
            if (txtAdd.trim() == "")
                alert('Please input text!');
            else
                $('#para').prepend('<h3>' + txtAdd + '</h3>');
        });

        $('#btnAddAfter').click(function () {
            var txtAdd = $('#txtPara').val();
            if (txtAdd.trim() == "")
                alert('Please input text!');
            else
                $('#para').append('<h3>' + txtAdd + '</h3>');
        });

        /*
            clone
         */

        $('#btnClone').click(function () {
            $('#divNames').clone().appendTo('#para');
        });

        /*
            add class
         */

        $('#divNormal').mouseover(function () {
            $('#divNormal').addClass('highlight');
        });

        $('#divNormal').mouseout(function () {
            $('#divNormal').removeClass('highlight');
        });
    });
</script>

<h2>Basic Selector</h2>
<br />
<h3>Path: @ViewBag.Path</h3>
<br />
<h3>See the result on console</h3>
<br />

<h3>Names Div</h3>
<div id="divNames">
    <div>Darjeeling</div>
    <div>Assam</div>
    <div>Kerala</div>
</div>

<br />

<p id="para">
    This is a paragraph
</p>
<input id="txtPara" type="text" />
<input id="btnInsertBefore" type="button" value="insert before" />
<input id="btnAddAfter" type="button" value="add after" />

<br />

<input id="btnClone" type="button" value="clone names" />

<br />
<br />

<div id="divNormal">
    Move your mouse on me!
</div>


